//符
//密码登录

<template>
  <div class="all_login1">
    <div class="bg_login1">
      <img src="../assets/andrea-rodriguez-m1tTo-2qTCA-unsplash.jpg" alt="" />
    </div>
    <div class="login1">
      <h1 class="title_login1">登录</h1>
      <div class="line1"></div>
      <div class="inputBOX">
        <div class="account">
          <div class="word">账号</div>
          <!--还未进行输入框的样式调整-->
          <input
            class="inputAccount"
            type="text"
            name="account"
            v-model="username"
          />
        </div>
        <div class="pwd">
          <div class="word">密码</div>
          <input
            class="inputPwd"
            type="password"
            name="password"
            v-model="password"
            @keyup.enter="loginPWD()"
          />
        </div>
        <button class="btn_login" @click="loginPWD()">登录</button>
        <div class="login_box">
          <router-link to="/loginCode" class="other_code"
            >验证码登录</router-link
          >
        </div>
        <!--跳转-->
        <div class="register_box">
          <router-link to="/register" class="register"
            >没有账号？点击注册</router-link
          >
        </div>
      </div>
    </div>
  </div>
  <router-view />
</template>
<script>
export default {
  name: "loginPwd",
  components: {},
  data() {
    return {
      num: "",
      id: "",
      type: "",
      username: "",
      password: "",
    };
  },
  methods: {
    loginPWD() {
      if (this.username == "" && this.password == "") alert("请填写账号密码");
      else {
        this.$http
          .post("/login/", {
            //  params: {
            type: "username",
            username: this.username,
            password: this.password,
            //  },
          })
          //回调函数
          .then((res) => {
            this.num = res.data.code;
            if (this.num != 20000) {
              alert("登录失败");
            } else {
              alert("登录成功");
              this.$router.push({
                path: "/mainPage",
              });
              sessionStorage.setItem(
                "token",
                JSON.stringify(res.data.data.access)
              );
              sessionStorage.setItem("user", JSON.stringify(this.username));
              this.$root.isToken++;
              this.$http
                .get("/user/info/", {
                  headers: {
                    Authorization:
                      "Bearer " + JSON.parse(sessionStorage.getItem("token")),
                  },
                })
                .then((res) => {
                  sessionStorage.setItem(
                    "ID",
                    JSON.stringify(res.data.data.id)
                  );
                });
            }
          })
          .catch(function (error) {
            if (error.response.status == 401) {
              alert("用户名或密码错了哦！");
            } else {
              alert("发生意外错误了！");
            }
          });

        // this.$http.interceptors.response.use(
        // response => {
        // console.log('拦截器 response success ')
        // console.log(response.status)
        // return response
        // },
        // error => {
        // console.log('拦截器 response error ')
        // console.log(error)
        // if(error.request){
        // console.log(error.request)
        // } else if(error.response){
        // console.log(error.response.data);
        // console.log(error.response.status);
        // console.log(error.response.headers);
        // }
        // if (error && error.response) {
        // switch (error.response.status) {
        // case 400: error.message = '请求错误(400)' ; break;
        // case 401: error.message = '未授权，请重新登录(401)'; break;
        // case 403: error.message = '拒绝访问(403)'; break;
        // case 404: error.message = '请求出错(404)'; break;
        // case 408: error.message = '请求超时(408)'; break;
        // case 500: error.message = '服务器错误(500)'; break;
        // case 501: error.message = '服务未实现(501)'; break;
        // case 502: error.message = '网络错误(502)'; break;
        // case 503: error.message = '服务不可用(503)'; break;
        // case 504: error.message = '网络超时(504)'; break;
        // case 505: error.message = 'HTTP版本不受支持(505)'; break;
        // // default: error.message = '接出错(${error.response.status});
        // }
        // }else{undefined
        // error.message = '连接服务器失败!'
        // }
        // return Promise.reject(error)
        // }
        // )
      }
    },
  },
};
</script>
<style scoped>
a,
a:visited,
a:hover,
a:active {
  text-decoration: none;
  color: inherit;
}
.all_login1 {
  /* width: 100%; */
  /* width: 1920px; */
  display: flex;
  justify-content: center;
  position: relative;
  margin: 0 auto;
}
.bg_login1 {
  width: 100%;
  height: 875px; /**待改 */
  margin: 0 auto;
  overflow: hidden;
  display: flex;
  justify-content: center;
}
.all_login1 .bg_login1 img {
  filter: blur(4px);
  height: 110%;
  width: 120%;
  margin: 0 auto;
  object-fit: cover;
  margin-top: -20px;
  margin-left: -10px;
}
.bg_login1::after {
  content: "";
  position: absolute;
  right: 0;
  left: 0;
  bottom: 0;
  top: 0;
  width: 100%;
  height: 100%;
  opacity: 0.3;
  background: #000;
}
.login1 {
  position: absolute;
  /* z-index: 5; */
  /* width: 1920px; */
  top: 0px;
  padding: 112px 0 251px 0;
  background-color: transparent;
}
.title_login1 {
  /* margin: 0 auto; */
  text-align: center;
  width: 100%;
  height: 58px;
  font-size: 60px;
  font-family: Microsoft YaHei UI;
  font-weight: bold;
  color: #ffffff;
  line-height: 66px;
  text-shadow: 0px 2px 4px rgba(0, 0, 0, 0.64);
}
.line1 {
  overflow: hidden;
  margin: 52px auto 62px;
  width: 1435px;
  height: 6px;
  background: #659274;
  box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.64);
  border-radius: 3px;
}
.inputBOX {
  /* overflow: hidden; */
  margin: 0 auto;
  width: 1435px;
}
.account {
  width: 520px;
  margin: 0 502px 31px 415px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.pwd {
  width: 520px; /**546 */
  margin: 0 502px 0 415px; /*388*/
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.word {
  /* width: 49px; */
  font-size: 24px;
  font-family: Microsoft YaHei UI;
  font-weight: bold;
  letter-spacing: 2px;
  color: #ffffff;
  line-height: 66px;
}
input {
  outline: none;
  width: 440px;
  height: 60px;
  background: #ffffff;
  box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 0.95);
  border-radius: 30px;
  letter-spacing: 1px;
  text-indent: 8px;
  font-size: 22px;
  border: 0 none transparent;
}
.btn_login {
  display: block; /**botton是行内块元素？？ */
  margin: 51px auto 0px;
  width: 440px;
  height: 80px;
  background: #659274;
  box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.64);
  border-radius: 39px;
  font-size: 36px;
  font-family: Microsoft YaHei UI;
  font-weight: bold;
  color: #ffffff;
  line-height: 66px;
  border: 0 none transparent;
}
.btn_login:hover {
  cursor: pointer;
}

/* 更改 */

.login_box {
  display: flex;
  align-items: center;
  margin-top: 20px;
}
.login_box {
  transition: all 0.3s;
}
.login_box .other_code:hover {
  color: #659274;
}
.register_box {
  display: flex;
  align-items: center;
  margin-top: 5px;
  text-align: center;
}
.register_box .register:hover {
  color: #659274;
}
.login_box .other_code {
  display: inline-block;
  width: 108px;
  margin: 0 auto;
  text-align: center; /*为什么div能生效*/
  height: 20px;
  font-size: 20px;
  font-family: Microsoft YaHei UI;
  font-weight: bold;
  color: #ffffff;
  line-height: 20px;
  transition: all 0.3s;
}
.register_box .register {
  width: 200px;
  margin: 5px auto;
  font-size: 18px;
  font-weight: bold;
  color: #ffffff;
  letter-spacing: 1px;
  text-shadow: 0px 2px 4px rgba(0, 0, 0, 0.54);
  transition: all 0.3s;
}
</style>
